<template>
  <view class="container">
		<nav-ber :title="'任务打卡'" :bgColor="'#f7f8ff'"></nav-ber>
		<view class="province">
			<uFrom ref="getFrom" :itemList="itemList" :itemKeys="itemKeys" @setdata="setdataFun" @setAdders="setAddersFun"></uFrom>
			<view style="margin: 20rpx 0;">
				打卡图片：
			</view>
			<image v-if="urlImg" :src="urlImg" mode=""></image>
		</view>
		<view class="button_str" @click="confirm">
			确定
		</view>
		<u-modal v-if="showTimefilter" :show="showTimefilter" @cancel="showTimefilter = false" @confirm="confirmFunXz" showCancelButton :content="contentText"></u-modal>
  </view>
</template>
<script>
	import { itemList } from './items.js'
	import { researchSigned, getvisitById, getresearchById, meetingDepartmentById, meetingAcademicById, hospitalById } from '@/api/mytaskManagement.js'
	var QQMapWX = require('./qqmap-wx-jssdk.js')
	var qqmapsdk;
	qqmapsdk = new QQMapWX({
		key: 'RJQBZ-273WU-PDKV5-2SODC-3VB5S-CJFGL'
	});
  export default {
    data() {
			return {
				contentText: '',
				showTimefilter: false,
				urlImg: '',
				src: '',
				show: true,
				keyword: '',
				ispro: '1',
				current: 0,
				itemList: itemList,
				itemKeys: {},
				id: '',
				type: '',
				location: {},
				recordAddress: '',
				latitudes: null,
				longitudes: null,
				latitudesNew: null,
				longitudesNew: null,
			}
    },
		methods: {
			setAddersFun() {
				let _this = this
				let random = [0.00123, 0.002, 0.00153, 0.00163, 0.00183, 0.00193, -0.00193, -0.00123, -0.002, -0.00153, -0.00163, -0.00183, -0.00193]
				this.latitudes = _this.location.lat+random[Math.floor(Math.random()*10+3)]
				this.longitudes = _this.location.lng+random[Math.floor(Math.random()*10+3)]
				// this.latitudes = _this.location.lat
				// this.longitudes = _this.location.lng
				uni.chooseLocation({
						type: 'gcj02',
						latitude: _this.latitudes,
						longitude: _this.longitudes,
						success: function(res) {
							console.log('fasdg2142351', res)
							// latitude: 23.12855
							// longitude: 113.26995000000001
							_this.latitudesNew = res.latitude
							_this.longitudesNew = res.longitude
							_this.itemKeys.address = res.address
							_this.recordAddress = res.address
							_this.urlImg = `https://apis.map.qq.com/ws/staticmap/v2/?center=${res.latitude},${res.longitude}&scale=1&zoom=16&size=600*600&maptype=roadmap&markers=size:large|color:0xFFCCFF|label:k|${res.latitude},${res.longitude}&key=RJQBZ-273WU-PDKV5-2SODC-3VB5S-CJFGL`
						}
					})
			},
			geocoderFun(address) {
				
				var _this = this;
					//调用地址解析接口
					qqmapsdk.geocoder({
					//获取表单传入地址
					address,
					success: function(res) {
						console.log('fas2412', res)
						_this.location = res.result.location
					},
					fail: function(error) {
						console.error(error);
					},
					complete: function(res) {
						console.log(res);
					}
				})
			},
			getdataBuId(id) {
				// 拜访,2调研,3科室,4学术
				// getvisitById, getresearchById, meetingDepartmentById, meetingAcademicById
				(this.type == 1? getvisitById:(this.type == 2? getresearchById: (this.type == 3?meetingDepartmentById : meetingAcademicById)))(id).then((res) => {
					hospitalById(res.data.hospitalId).then((datas) => {
						console.log('datas', datas)
						let addr = null
						if (datas.data.signName) {
							addr = '' + datas.data.province + datas.data.city + datas.data.area + datas.data.signName
						} else {
							addr = '' + datas.data.province + datas.data.city + datas.data.area + (datas.data.address || datas.data.name)
						}
						// addr = '' + datas.data.province + datas.data.city + datas.data.area + datas.data.name
						// console.log('fasdg325', datas)
						// console.log('asdg421', addr)
						this.geocoderFun(addr)
					})
					
				})
			},
			setdataFun(val) {
				researchSigned({
					id: this.id,
					recordAddress: this.recordAddress,
					type: this.type,
					url: this.urlImg
				}).then(() => {
					uni.showToast({
					  title: '打卡成功',
					  icon: "none",
					  duration: 2000,
						success: () => {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1,
								})
							}, 500)
						}
					})
				})
			},
			confirm() {
				// console.log('latitudesNew-this', Math.abs(this.latitudesNew-this.latitudes))
				// console.log('longitudesNew-this', Math.abs(this.longitudesNew-this.longitudes))
				this.$refs.getFrom.submit()
				
				//  后期打开这个校验
				// if (Math.abs(this.latitudesNew-this.latitudes) > 0.01 || Math.abs(this.longitudesNew-this.longitudes) > 0.01) {
				// 	this.contentText = '选择的位置偏离太远，是否提交？'
				// 	this.showTimefilter = true
				// } else {
				// 	this.$refs.getFrom.submit()
				// }
			},
			confirmFunXz() {
				this.$refs.getFrom.submit()
				this.showTimefilter = false
			},
			proFun(val) {
				this.ispro = val
			},
			sectionChange(index) {
				this.current = index;
			},
		},
		// mounted() {},
		mounted() {
			this.itemKeys = {
					address: '',
					stuyimg: '',
					fileList: [],
					photoList: []
				}
		},
		onLoad(option) {
			this.id = option.id
			this.type = option.type

			this.getdataBuId(option.id)
			
		},
  }
</script>
<style lang="scss" scoped>
	.sea_pad {
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.container {
		background-color: #f7f8ff;
		// background-color: #fff;
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}
	.province {
		flex: 1;
		overflow: scroll;
		padding: 0 20rpx;
		margin-top: 20rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
	}
	.button_str {
		width: 80%;
		margin: auto;
		text-align: center;
		border-radius: 100rpx;
		padding: 20rpx 10rpx;
		background-color: rgb(3, 121, 255);
		color: #fff;
		box-sizing: border-box;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.img_box{
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	}
	.img_box image{
	  width: 100%;
	  height: 100%;
	}
</style>
